<script>
export default {
    name: "Cart",
    mounted() {
        this.$store.dispatch('cart/getCartListAsync');
    },
    methods:{
        deleteOne(id){
            if(window.confirm('你确定删除该商品吗?')){
                this.$store.dispatch('cart/deleteCartGoodsAsync',id)
            }
        },
        deleteAll(){
            this.$store.dispatch('cart/postDeleteCartAsync')
        },
        toTrade(){
            if(this.$store.getters["cart/countCart"].checkedNum>0){
                this.$router.push('/trade')
            }else this.$message.error('你还没有选择商品');
        },
        isAllChecked(e){
            const isChecked = e.target.checked?1:0;
            this.$store.dispatch('cart/postCheckAllAsync',isChecked);
        },
        addCount(item){//true为增加,false为减少
            if(item.buyNum === 9999) return;
            this.$store.dispatch('cart/postAddCartAsync',{
                skuId:item.skuId,
                buyNum:1
            })
        },
        cutCount(item){//true为增加,false为减少
            if(item.buyNum === 1) return;
            this.$store.dispatch('cart/postAddCartAsync',{
                skuId:item.skuId,
                buyNum:-1
            })
        }
    }
}
</script>

<template>
    <div v-if="$store.state.cart.cartInfoList.length>0" class="cart">
        <h4>全部商品</h4>
        <div class="cart-main">
            <div class="cart-th">
                <div class="cart-th1">全部</div>
                <div class="cart-th2">商品</div>
                <div class="cart-th4">单价</div>
                <div class="cart-th4">数量</div>
                <div class="cart-th5">小计（元）</div>
                <div class="cart-th6">操作</div>
            </div>
            <div class="cart-body">
                <ul class="cart-list" v-for="item in $store.state.cart.cartInfoList" :key="item._id">
                    <li class="cart-list-con1">
                        <input @change="$store.dispatch('cart/getCheckCartAsync',{cartId:item._id,isChecked:!item.isChecked})" :checked="item.isChecked" type="checkbox" name="chk_list">
                    </li>
                    <li class="cart-list-con2">
                        <router-link :to="'/detail/'+ item.skuId + '.html'" >
                            <img :src="'/img'+item.imgUrl">
                            <div class="item-msg">{{item.skuName}}</div>
                        </router-link>
                    </li>
                    <li class="cart-list-con4">
                        <span class="price">{{item.skuPrice}}</span>
                    </li>
                    <li class="cart-list-con5">
                        <a @click.prevent="cutCount(item)" class="mins">-</a>
                        <input autocomplete="off" type="text" :value="item.buyNum" minnum="1" class="itxt">
                        <a @click.prevent="addCount(item)" class="plus">+</a>
                    </li>
                    <li class="cart-list-con6">
                        <span class="sum">{{item.buyNum*item.skuPrice}}</span>
                    </li>
                    <li class="cart-list-con7">
                        <a class="sindelet" @click.prevent="deleteOne(item._id)">删除</a>
                        <br>
                    </li>
                </ul>

            </div>
        </div>
        <div class="cart-tool">
            <div class="select-all">
                <input @change="isAllChecked"
                       :checked="$store.getters['cart/countCart'].checkedNum===$store.state.cart.cartInfoList.length&&$store.state.cart.cartInfoList.length>0"
                       class="chooseAll" type="checkbox">
                <span>全选</span>
            </div>
            <div class="option">
                <a @click.prevent="deleteAll">删除选中的商品</a>
            </div>
            <div class="money-box">
                <div class="chosed">已选择
                    <span>{{$store.getters["cart/countCart"].checkedNum}}</span>件商品</div>
                <div class="sumprice">
                    <em>总价（不含运费） ：</em>
                    <i class="summoney">{{$store.getters["cart/countCart"].sumPrice}}</i>
                </div>
                <div class="sumbtn">
                    <a :class="{'sum-btn':!$store.getters['cart/countCart'].checkedNum>0}" @click.prevent="toTrade">结算</a>
                </div>
            </div>
        </div>
    </div>
    <div v-else >
        <el-empty description="购物车空空如也~"></el-empty>
    </div>
</template>

<style scoped lang="less">
.cart {
    width: 1200px;
    margin: 0 auto;

    h4 {
        margin: 9px 0;
        font-size: 14px;
        line-height: 21px;
    }

    .cart-main {
        .cart-th {
            background: #f5f5f5;
            border: 1px solid #ddd;
            padding: 10px;
            overflow: hidden;

            & > div {
                float: left;
            }

            .cart-th1 {
                width: 25%;

                input {
                    vertical-align: middle;
                }

                span {
                    vertical-align: middle;
                }
            }

            .cart-th2 {
                width: 25%;
            }

            .cart-th3,
            .cart-th4,
            .cart-th5,
            .cart-th6 {
                width: 12.5%;
            }
        }

        .cart-body {
            margin: 15px 0;
            border: 1px solid #ddd;

            .cart-list {
                padding: 10px;
                border-bottom: 1px solid #ddd;
                overflow: hidden;

                & > li {
                    float: left;
                }

                .cart-list-con1 {
                    width: 15%;
                }

                .cart-list-con2 {
                    width: 35%;

                    img {
                        width: 82px;
                        height: 82px;
                        float: left;
                    }

                    .item-msg {
                        float: left;
                        width: 150px;
                        margin: 0 10px;
                        line-height: 18px;
                    }
                }

                .cart-list-con4 {
                    width: 10%;
                }

                .cart-list-con5 {
                    width: 17%;

                    .mins {
                        border: 1px solid #ddd;
                        border-right: 0;
                        float: left;
                        color: #666;
                        width: 6px;
                        text-align: center;
                        padding: 8px;
                    }

                    input {
                        border: 1px solid #ddd;
                        width: 40px;
                        height: 33px;
                        float: left;
                        text-align: center;
                        font-size: 14px;
                    }

                    .plus {
                        border: 1px solid #ddd;
                        border-left: 0;
                        float: left;
                        color: #666;
                        width: 6px;
                        text-align: center;
                        padding: 8px;
                    }
                }

                .cart-list-con6 {
                    width: 10%;

                    .sum {
                        font-size: 16px;
                    }
                }

                .cart-list-con7 {
                    width: 13%;

                    a {
                        color: #666;
                    }
                }
            }
        }
    }

    .cart-tool {
        overflow: hidden;
        border: 1px solid #ddd;

        .select-all {
            padding: 10px;
            overflow: hidden;
            float: left;
            height: 32px;
            line-height: 32px;
            span {
                vertical-align: middle;
            }

            input {
                vertical-align: middle;
            }
        }

        .option {
            padding: 10px;
            overflow: hidden;
            float: left;
            height: 32px;
            line-height: 32px;
            a {
                float: left;
                padding: 0 10px;
                color: #666;
            }
        }

        .money-box {
            float: right;

            .chosed {
                height: 32px;
                line-height: 32px;
                float: left;
                padding: 10px 10px;
            }

            .sumprice {
                width: 200px;
                height: 32px;
                line-height: 32px;
                float: left;
                padding: 10px 10px;

                .summoney {
                    color: #c81623;
                    font-size: 16px;
                }
            }


            .sumbtn {
                float: right;

                a {
                    display: block;
                    position: relative;
                    width: 96px;
                    height: 52px;
                    line-height: 52px;
                    color: #fff;
                    text-align: center;
                    font-size: 18px;
                    font-family: "Microsoft YaHei";
                    background: #e1251b;
                    overflow: hidden;
                    &.sum-btn{
                        background-color: #ccc !important;
                    }
                }
            }
        }
    }
}
</style>